
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(document).ready(function(){
			function rollOne(){
				$(".picBox").animate({marginLeft:"-300px"},2000,"linear",function(){
					$(this).css({marginLeft:"0px"});
					$(this).children("li").first().remove().clone(true).appendTo(".picBox");
				});
			}
			var startRollOne=setInterval(rollOne,2000);
			$(".box").hover(function () {
				clearInterval(startRollOne);
			}, function () {
				startRollOne=setInterval(rollOne,2000);
			});
		});
	</script>
	<style>
*{margin:0px auto;padding:0px;}
ul{list-style: none;}
a{text-decoration: none;}
.box{width: 730px;height: 454px;margin-top:100px;position: relative;overflow: hidden;}
.box-in{width: 6000px;position: absolute;top:0px;left: 0px;}
.box-in li{float: left;}
.btn{width: 730px;height: 30px;position: absolute;top:50%;left: 50%;margin-left: -365px;margin-top: -15px;}
.btn a{width: 50px;height: 70px;background: pink;color: #fff;line-height: 70px;text-align: center;font-size: 30px;}
.zuo{float: left;}
.you{float: right;}
.circle{width: 150px;height: 30px;bottom: 10px;right:10px;position: absolute;}
.circle span{width: 18px;height: 18px;border-radius: 50%;background-color: white;float: left;text-align: center;line-height: 18px;margin-right: 5px;cursor: pointer;}
.circle span.current{background: purple;}
	</style>
</head>
<body>
<div class="box">
       <ul class="box-in">
            <li><img src="changc_lb (3).png"></li>
            <li><img src="changc_lb (3).png"></li>
            <li><img src="changc_lb (3).png"></li>
            <li><img src="changc_lb (3).png"></li>
            <li><img src="changc_lb (3).png"></li>
            <li><img src="changc_lb (3).png"></li>
            <li><img src="changc_lb (3).png"></li>
       
     </ul>
       <div class="btn">
            <a href="javascript:;" class="zuo">&lt;</a>
            <a href="javascript:;" class="you">&gt;</a>
       </div>

   </div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
            var nowimg=0;
            var timer=null;
            // 克隆第一张图片，并且放到最后
            $(".box-in li:first").clone().appendTo('.box-in')
            // 右按钮业务
            $(".you").click(rightFunc)
                function rightFunc(){

                if(nowimg<5){
                    nowimg++
                    $(".box-in").animate({"left":nowimg*-730},1000)
                }else{
                    nowimg=0
                    $(".box-in").animate({"left":6*-730},1000,function(){
                        $(".box-in").css("left",0)

                    })
                }
                $(".circle span").eq(nowimg).addClass('current').siblings().removeClass('current')

            }
            // 左按钮业务
            $(".zuo").click(function(){
                if(nowimg>0){
                    nowimg--
                    $(".box-in").animate({"left":nowimg*-730},1000)
                }else{
                    nowimg=5
                    $(".box-in").css({"left":6*-730},1000)
                    $(".box-in").animate({"left":nowimg*-730},1000)
                }
                $(".circle span").eq(nowimg).addClass('current').siblings().removeClass('current')
            })

            // 自动轮播

            timer=setInterval(rightFunc,2000)

            $(".box").mouseenter(function(){
                clearInterval(timer)
            })
            $(".box").mouseout(function(){
                clearInterval(timer)
                timer=setInterval(rightFunc,2000)
            })

        })
</script>
</html>